<template>
  <div class="list" ref="list" @scroll="onScroll">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.nid"
          :to="{ path: `/article/${item.nid}` }"
        >
          <template>
            <div>{{ item.title }}</div>
            <van-grid :border="false" :column-num="item.cover">
              <!-- <van-grid-item v-for="(val, idx) in item.cover.images" :key="idx"> -->
                <van-image :src="item.cover" />
              <!-- </van-grid-item> -->
            </van-grid>
            <div class="bottom">
              <span>{{ item.aut_name }}</span>
              <i>&nbsp;&nbsp;{{ item.comm_count }}评论</i>
              <i>&nbsp;&nbsp;{{ item.pubdate | relvTime }}</i>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 
        load事件绑定的onLoad，专门用来加载数据的方法
        调用时机：
            当数据没铺满时自动调用
            当你往上拉拉到底也会自动调用

        finished用来标记是否全部加载完成，默认为false（否则页面一打开就显示加载完了）
            当他的值如果为true就代表全部加载完成，onLoad就不会再被调用了

        v-model绑定的loading，它代表本次加载数据的状态
            为false代表当前没有在加载数据(或者说本次加载完了，可以进行下次加载)
            为true代表当前还正在加载中，不能进行下次加载

            当onLoad被调用时，会自动把它的值改成true，代表正在加载中
            当加载完数据一定要记得手动把这个值改成false，那样才能进行下次加载
     -->
  </div>
</template>

<script>
import { articleListAPI } from '@/api'
import { removeArticleID } from '@/utils/auth'
import moments from '@/utils/moment'
export default {
  name: 'myList',
  beforeCreate () {
    removeArticleID()
  },
  props: ['channel_id'],
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false,
      scrollTop: 0
    }
  },
  activated () {
    this.$refs.list.scrollTop = this.scrollTop
  },
  moments(){
    this.onLoad()
    this.onRefresh()
  },
  methods: {
    onScroll () {
      this.scrollTop = this.$refs.list.scrollTop
      console.log(this.scrollTop)
    },
    async skip (id) {
      this.$router.push({
        path: '/article',
        query: {
          id
        }
      })
    },
    async onRefresh () {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: Date.now()
      })
      console.log("加载文章详情", res)
      this.list = res.data.data
      this.isLoading = false
    },
    async onLoad () {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
        // timestamp: Date.now()
      })
      console.log("加载文章详情", res)
      this.timestamp = res.data.data.pre_timestamp
      // this.list.push(...res.data.data.results)
      // this.list.push(...res.data.data)
      this.list = res.data.data
      this.loading = false
      //   this.columnNum =
      if (!this.timestamp) {
        // 到头了
        this.finished = true
      }
      //   console.log('this.list', this.list)
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  position: fixed;
  top: 90px;
  bottom: 50px;
  overflow: auto;
  width: 100%;
}
</style>
